<template>
<div style="padding:0 10px; boxSizing: border-box;">
  <div class="wrapper" ref="wrapper">
    <ul class="tabs" ref="tabs">  
      <div 
        is="li"
        ref="tab"
        class="nav-item hover-style" 
        v-for="(item, index) in list"
        :key="item.id"
        @click="handleClick(index)"
        >
        <span 
          ref='tabname'
          class="lottery-name"
          :class="currentTabIndex == index ? 'active' : ''"
        >
          {{item.tabname}}
        </span>
      </div>
    </ul>
    <div class="shadow-left shadow" v-show="showLeftShadow"></div>
    <div class="shadow-right shadow"></div>
  </div>
</div>
</template>

<script>
import NumberSelector from '@/components/base/number-selector/number-selector'
import BScroll from 'better-scroll'
export default {
  components: {
    NumberSelector,
  },
  props: {
    list: {
      type: Array,
      default: function() {
        return [
          {
            id: 1, 
            tabname: '111'
          },
          {
            id: 2,
            tabname: '333'
          }
        ]
      }
    },
    currentTabIndex: {
      type: Number,
      default: 0
    },
    showLeftShadow: {
      typo: Boolean,
      default: true
    },
    showRightShadow: {
      typo: Boolean,
      default: true
    }
  },
  data() {
    return {
      
    }
  },
  mounted() {
    this.initialBStroll()
  },
  methods: {
    handleClick(index) {
      this.$emit('click', index)
    },
    initialBStroll() {
      let width = 0
      for (let i = 0; i < this.list.length; i++) {
        width += this.$refs.tab[i].getBoundingClientRect().width
        // this.$refs.tabname[i].style.left = (this.$refs.tab[i].getBoundingClientRect().width - this.$refs.tabname[i].getBoundingClientRect().width) / 2 + 'px'
      }
      this.$refs.tabs.style.width = width + 'px'
      // console.log(this.$refs.tabs.style.width)
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          startX: 0,
          click: true,
          scrollX: true,
          scrollY: false
        })
      } else {
        this.scroll.refresh()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @import '~@/assets/styles/mixins.styl'
  .wrapper 
    width 100% 
    overflow hidden
    position relative 
    .shadow 
      width 1px 
      height 36px 
      top 2px
      position absolute  
      &.shadow-left 
        left 0px 
        box-shadow  3px 0px 6px #333
      &.shadow-right 
        right 0px 
        box-shadow -3px 0px 6px #333 
    ul 
      font-size 0 
      width 100%
      .nav-item
        font-size 15px 
        height 40px 
        line-height 40px
        display inline-block
        padding 0 8px
        extend-click()
        .active 
          color $color-theme-red
        
    
     
</style>